<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="css/layui.mobile.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 基本样式 -->
    <link rel="prefetch" href="http://cpbridge.bceapp.com/index.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/Single-circle.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/message.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/activity.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/mine.html" />
    <script src="js/common.js"></script>
    <title>单身圈</title>
    <style>.spinner{width:20px;height:20px;position:fixed;z-index:1002;top:50%;margin-top:-10px;left:50%;margin-left:-10px}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#ff536a;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}#loading .mask{position:fixed;width:100%;background-color:#fff;top:0;left:0;height:100%;z-index:1001}
    </style>
</head>
<body>
<div id="loading">
    <div class="mask"></div>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
    <div style="margin-bottom: 55px;">
        <!-- title -->
       <div class="single-circle-title">
           <p>单身圈</p>
       </div>
       <!-- 行业列表 -->
       <div id="list"></div>
    </div>
<!-- 菜单栏 -->
    <footer>
        <ul class="tab-nav">
           <li>
               <a href="index.html">
                    <div class="icon-box">
                        <i class="icon1"></i>
                    </div>
                    <div>
                        <span >首页</span>
                    </div>
               </a>
           </li>
             <li>
               <a href="">
                    <div class="icon-box">
                        <i class="icon2"></i>
                    </div>
                    <div>
                        <span class="active">单身圈</span>
                    </div>
               </a>
           </li>
            <li>
               <a href="message.html">
                    <div class="icon-box">
                        <i class="icon-xx"></i>
                    </div>
                    <div>
                        <span>消息</span>
                    </div>
               </a>
           </li>
            <li>
               <a href="activity.html">
                    <div class="icon-box">
                        <i class="iconhd"></i>
                    </div>
                    <div>
                        <span>活动</span>
                    </div>
               </a>
           </li>
            <li>
               <a href="mine.html">
                    <div class="icon-box">
                        <i class="iconmy"></i>
                    </div>
                    <div>
                        <span>我的</span>
                    </div>
               </a>
           </li>
        </ul>
    </footer>
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<script src="js/jquery/layer.js"></script>
<script src="js/utils.js"></script>
<script>
    Utils.historyBack(function () {
        window.location.href = 'index.html';
    });
    var isgzbtn=false;
    var isqx=false;
    var DateTime = Math.floor(new Date().getTime()/1000);
    $.ajax({
        type : "GET",
        url : getRequestUrl("/community/get"),
        data:{
            user_id:"1",
            timestamp:DateTime
        },
        success : function(datas) {
            console.log(datas);
            var arr=datas.response_params.result;
            var strs1="";
            $.each(arr,function (i,el) {
                //var imgarr=arr[i].show_pics;
                strs1+=`<div class="single-circle" data-id=`+arr[i].community_id+` onclick="getqz(this)">
                                <div class="single-circle-imgbox">
                                    <img src=`+arr[i].logo_url+`>
                                </div>
                                <div class="single-circle-box">
                                    <h3>`+arr[i].name+`(`+arr[i].total_user_cnt+`人)</h3>
                                    <div class="toxi-box" >
                                        <ul>
                                           `+list(arr[i].portraits)+`
                                        </ul>
                                        <p>
                                            <span>`+arr[i].page_view_cnt+`人气</span>&nbsp;&nbsp;<span>`+arr[i].follow_user_cnt+`关注</span>
                                        </p>
                                    </div>
                                    <div class="anniu-box">
                                        <span data-id=`+arr[i].community_id+` class="div3 `+isgz(arr[i].is_follow)+`" onclick="gzbtn(this)">`+ isgzwz(arr[i].is_follow)+`</span>
                                    </div>
                                </div>
                          </div>`
            });
            $(strs1).appendTo("#list");
            $("#loading").hide();
            //console.log(strs1)
        },
        error : function(err) {
        	dealCPErrorResponse(err);
        }
    });
    function list(arr) {
        var strs="";
        $.each(arr,function (i,e) {
            strs+=` <li>
                         <img src=`+arr[i]+`>
                     </li>`
        });
        return strs;
    }
    function isgz(a) {
        if(a=="1"){
            return "ygz";
        }else {
            return "";
        }
    }
    function isgzwz(a) {
        if(a=="1"){
            return "取消关注";
        }else {
            return "关注";
        }
    }
    function getqz(obj) {
        var $this=$(obj);
        var id=$this.attr("data-id");
        window.location.href="Single-info.html?qzid="+id;
        //alert("111")
    }
    function gzbtn(obj) {
        var $this=$(obj);

        var id=$this.attr("data-id");
        //$this.toggleClass("ygz");
        if($this.hasClass("ygz")){
            unusergz(id);
            //$this.html("取消关注")
        }else {
            usergz(id);
            if(isgz){
                $this.html("关注")
            }
            //

        }
        event.stopPropagation()
    }

    function usergz(id) {
        ///user/follow_community
        $.ajax({
            type : "POST",
            url : getRequestUrl("/user/follow_community"),
            dataType : 'json',
            async: true,
            data:{
                community_id:id
            },
            success : function(datas) {
                console.log(datas);
                window.location.reload();
                //var arr=datas.response_params.result;
                isgzbtn=true;

            },
            error : function(err) {
            	//dealCPErrorResponse(err);
                if(err.responseJSON.error_code==31003){
                    //$("#loading").hide();
                    layer.open({
                        content: "您还未完成实名认证，完成实名认证即可享受更多免费福利哦~"
                        ,btn: ['认证去', '再看看']
                        ,yes: function(index){
                            layer.open({
                                content: "为保证安全实名认证为手机号+身份证认证+填写个人详细信息。"
                                ,btn: ['认证去', '填信息']
                                ,no: function(index){
                                    window.location.href="Edit-information.html";
                                    layer.close(index);
                                }
                                ,yes: function(index){
                                    window.location.href="certification.html";
                                    layer.close(index);
                                }
                            });
                        }
                    });
                    return false
                }
            }
        });
    }

    function unusergz(id) {
        ///user/follow_community
        $.ajax({
            type : "POST",
            url : getRequestUrl("/user/unfollow_community"),
            dataType : 'json',
            async: true,
            data:{
                community_id:id
            },
            success : function(datas) {
                console.log(datas);
                isqx=true;
                window.location.reload();
                //var arr=datas.response_params.result;
            },
            error : function(err) {
                if(err.responseJSON.error_code==31003){
                    //$("#loading").hide();
                    layer.open({
                        content: "您还未完成实名认证，完成实名认证即可享受更多免费福利哦~"
                        ,btn: ['认证去', '再看看']
                        ,yes: function(index){
                            // window.location.href="Edit-information.html";
                            // layer.close(index);
                            layer.open({
                                content: "为保证安全实名认证为手机号+身份证认证+填写个人详细信息。"
                                ,btn: ['认证去', '填信息']
                                ,no: function(index){
                                    window.location.href="Edit-information.html";
                                    layer.close(index);
                                }
                                ,yes: function(index){
                                    window.location.href="certification.html";
                                    layer.close(index);
                                }
                            });
                        }
                    });
                    return false
                }
            	//dealCPErrorResponse(err);
            }
        });
    }
</script>
</body>
</html>